<head>
		<!--<%= javascript_include_tag "user/select_view" %> -->
    <%= stylesheet_link_tag 'analysis/select_view' %>


<%= stylesheet_link_tag 'user/people' %>


    <script type="text/javascript">

    function RenderChart(id){
    	if(id=="#tab1"){
 			chart = new Highcharts.Chart({
   			     chart: {
   			         renderTo: 'chart1',
   			         type: 'column',
   			         margin: 75,
   			         options3d: {
   			             enabled: true,
   			             alpha: 15,
   			             beta: 15,
   			             depth: 50,
   			             viewDistance: 25
   			         }
   			     },
   			     title: {
   			         text: 'Code Amount Per Task'
   			     },
   			     subtitle: {
   			         text: 'Test options by dragging the sliders below'
   			     },
   			     plotOptions: {
   			         column: {
   			             depth: 50
   			         }
   			     },
   			     credits: {
           			 enabled: false
      			 },
   			     series: [{
   			         data: [493, 966, 200]
   			     }]
   			 });
    	}
    	else if(id == "#tab2"){
    	   var year=2013;
    	   var month=0;
    	   var day=10;
    	   var person="Ray";
    	  $('#chart2').highcharts({
    	  	  chart: {
                zoomType: 'x'
            },
            title: {
                text: 'Amount of Code Committed by '+person
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Pinch the chart to zoom in'
            },
            xAxis: {
                type: 'datetime',
                minRange: 14 * 24 * 3600000 // fourteen days
            },
            yAxis: {
                title: {
                    text: 'Lines of Code'
                }
            },
            legend: {
                enabled: false
            },
			credits: {
           	    enabled: false
      	    },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },
    
            series: [{
                type: 'area',
                name: person,
                pointInterval: 24 * 3600 * 1000,
                pointStart: Date.UTC(year, month, day),
                data: [
                    0.8446, 0.8445, 0.8444, 0.8451,    0.8418, 0.8264,    0.8258, 0.8232,    0.8233, 0.8258,
                    0.8283, 0.8278, 0.8256, 0.8292,    0.8239, 0.8239,    0.8245, 0.8265,    0.8261, 0.8269,
                    0.8273, 0.8244, 0.8244, 0.8172,    0.8139, 0.8146,    0.8164, 0.82,    0.8269, 0.8269,
                    0.8269, 0.8258, 0.8247, 0.8286,    0.8289, 0.8316,    0.832, 0.8333,    0.8352, 0.8357,
                    0.8355, 0.8354, 0.8403, 0.8403,    0.8406, 0.8403,    0.8396, 0.8418,    0.8409, 0.8384
                ]
            }]
           });


    	}
    	else if(id == "#tab3"){

    	}
    	else if(id == "#tab4"){

    	}
    	else{
    		alert("Invalid RenderChart Id!");
    	}
    }


	function PeopleShowChart(){

						// $('.people_class').css("background","rgba(255,255,255,1)");
						// $('.people_class').css("color","#000000");
						// $(this).css("background","#FF9933");
						// $(this).css("color","#FFFFFF");
						// var str=$(this).attr('class');
						// // alert(str);
						// var res=str.split(" ");
						// current_people=".index"+res[1];


	 			event.preventDefault();
				var id_tab="#tab1";
				$('#menu ul li a').removeClass('hover_tab');
				// alert($(id_tab).attr('id'));
				$('.tab1').addClass('hover_tab');
				// console.log($(id_tab).attr('class'));
				// alert(2);
				$('div.txt_tab:visible').hide();
				$( id_tab ).show( 0, function() {
 					chartdiv=$(id_tab).children();
 					// alert(chartdiv.attr('id'));
 					if(typeof chartdiv.highcharts() != 'undefined')
 						chartdiv.highcharts().destroy();
 					RenderChart(id_tab);
 				});

	}


    var chart;
	$(document).ready(function(){
				  // Set up the chart
       RenderChart("#tab1");    

  	     // Activate the sliders
  	     $('#R0').on('change', function(){
  	         chart.options.chart.options3d.alpha = this.value;
  	         showValues();
  	         chart.redraw(false);
  	     });
  	     $('#R1').on('change', function(){
  	         chart.options.chart.options3d.beta = this.value;
  	         showValues();
  	         chart.redraw(false);
  	     });

	     function showValues() {
	         $('#R0-value').html(chart.options.chart.options3d.alpha);
	         $('#R1-value').html(chart.options.chart.options3d.beta);
	     }
	     showValues();


	     $('.txt_tab:gt(0)').css('display', 'none');

	     $('#menu ul li a').click(function(event){
	    		  event.preventDefault();
	    		  var id_tab = $(this).attr('href');
	    		  // alert(id_tab)
	    		  $('#menu ul li a').removeClass('hover_tab');
	    		  $(this).addClass('hover_tab');
	    		  $('div.txt_tab:visible').hide();
	    		  // $(id_tab).show('slide',f1);
	     		  $( id_tab ).show( 0, function() {
	     		  	chartdiv=$(id_tab).children();
	     		  	// alert(chartdiv.attr('id'));
	     		  	if(typeof chartdiv.highcharts() != 'undefined')
	     		  		chartdiv.highcharts().destroy();
	     		  	RenderChart(id_tab);
	     		  });
	     });

		
	});

    </script>




</head>


<div>
	<div style="padding-top:10px;"></div>
			<div class="col-lg-2 col-md-2 col-xs-2" >
			<div id="container">
			  <div class="list-view-p">
			    <ul>

			    	<% @projects.each_with_index do |p,index| %>
			    	<li>
			    	 <div id="<%=p.project_id%>" class ="p_class myp_<%=index%>"> 
			    	     <span class="avatar"><i class="icon-book icon-2x"></i></span>
			    	     <span class="name" id="pn_<%= p.project_id %>"  ><%= p.project_name %> </span>
			    	 </div> 
			    	</li>
			    	<% end %>
			    </ul>
			  </div>
			</div>

				

			

		</div>

		
		<div class="col-lg-2 col-md-2 col-xs-2">
			<div id="container">
			  <div class="list-view">
			    <ul>
			    	<% @p_hash.each_with_index do |(project_id,members),p_index|%>
			    	  <% members.each_with_index do |m,index| %>
			    	   <% if p_index == 0%>
			   		   		
			   		   		    <%if m.role == "owner"%>
			   		   		    <li class="people_class project_<%=project_id%> member <%=project_id%>_m<%=index%> index<%=p_index%>_<%=index%>" num="<%=members.length%>" onclick="PeopleShowChart();">
			   			   	   		<span class="king"></span>
			   			   	   		<span class="name"><%=m.member_name%></span>
			   			   	   	 </li>
			   			   	   <%else%>
			   			   	   <%end%>
			   			   	     
			   			   	

			   		   <% else %>
			   		   	
			   		   			<%if m.role == "owner"%>
			   		   				<li class="people_class project_<%=project_id%> member <%=project_id%>_m<%=index%> index<%=p_index%>_<%=index%>" num="<%=members.length%>" style="display:none" onclick="PeopleShowChart();">
			   			   	   		<span class="king"></span>
			   			   	   		<span class="name"><%=m.member_name%></span>
			   			   	   	</li>
			   			   	   <%else%>
			   			   	   <%end%>

			   		   <% end  %>

			   		
			   		  <% end %>

			   		  <% members.each_with_index do |m,index| %>
			   		  	   <% if p_index == 0%>
			   		   		
			   		   		    <%if m.role == "member"%>
			   		   		    <li class="people_class project_<%=project_id%> member <%=project_id%>_m<%=index%> index<%=p_index%>_<%=index%>" num="<%=members.length%>" onclick="PeopleShowChart();">
			   			   	   		<span class="avatar"></span>
			   			   	   		<span class="name"><%=m.member_name%></span>
			   			   	   	</li>
			   			   	   <%else%>
			   			   	   <%end%>
			   			   	     


			   		   <% else %>
			   		   	
			   		   			<%if m.role == "member"%>
			   		   				<li class="people_class project_<%=project_id%> member <%=project_id%>_m<%=index%> index<%=p_index%>_<%=index%>" num="<%=members.length%>" style="display:none" onclick="PeopleShowChart();">
			   			   	   		<span class="avatar"></span>
			   			   	   		<span class="name"><%=m.member_name%></span>
			   			   	   	</li>
			   			   	   <%else%>
			   			   	   <%end%>

			   		   <% end  %>

			   		
			   		  <% end %>

			    	<% end %>

			    </ul>
			  </div>
			</div>
		</div>




		<div class="col-lg-8 col-md-8 col-xs-8">
			<div class="row">
				<!-- <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Check Code Data
</button> -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="width:90%;height:600px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h5 class="modal-title" id="myModalLabel" style="font-size:15px;">Data on Jeremy Bao
      	<button class="btn btn-default" onclick="myFunction()">Start Analysis</button></h5>

      </div>
      <div class="modal-body" style="height:80%;">
      	<script type="text/javascript">
      		function myFunction() {
					    document.getElementById("gitstate").src = "http://www.ghv.artzub.com/#user=bao1018";
					    document.getElementById("gitstate").style.visibility = 'visible';
					}
      	</script>
        <!-- <iframe id="gitstate" src="http://www.ghv.artzub.com/#user=bao1018" style="width:800px;height:500px;" ></iframe> -->

        <iframe id="gitstate" src="http://www.w3.org" style="width:100%;height:600px;visibility:hidden;"  ></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
			</div>
			  	 <!-- <div id="datatable"></div> -->
			
			<div id="menu">
			  <ul>
			    <li><a id="bb1" class="hover_tab tab1" href="#tab1">Amount of Code</a></li>
			    <li><a class="tab2" href="#tab2">Performance</a></li>
			    <li><a class="tab3" href="#tab3">Efficiency</a></li>
			    <li><a class="tab4" data-toggle="modal" data-target="#myModal">Check Code Data</a></li>
			  </ul>
			</div>
			<div style="clear:both"></div>
			<div id="txt_cont">
			  <div class="txt_tab" id="tab1">
			   	 <div id="chart1" style="width: 100%; height: 500px;"></div>
			  </div>

			  <div class="txt_tab" id="tab2">			   	
			     <div id="chart2" style="width: 100%; height: 500px;"></div>
			  </div>

			  <div class="txt_tab" id="tab3">
			  	 <!-- <div id="chart3" style="width: 100%; height: 500px;"></div> -->

			  	 <div id="datatable" style="width: 100%; height: 500px;"></div>
					<script type="text/javascript">

					var rows = []
					var formatdate = d3.time.format("%b %d %Y");

					d3.csv("/assets/dortmund.csv", function(error, csv) {
					  csv.forEach(function(row) {
					    row.mu = parseFloat(row.mu).toFixed(0);
					    row.dt = formatdate(new Date(Date.parse(row.date)));

					    var res = parseFloat(row.result);
					    if (res < .5) {
					      row.result = "low";
					    } else if (res > .5) {
					      row.result = "high";
					    } else {
					      row.result = "medium";
					    }
					    
					    rows.push(row);
					  });

					  var table = d3.select("#datatable").append("table");
					      thead = table.append("thead");
					      tbody = table.append("tbody");

					  thead.append("th").text("Date");
					  thead.append("th").text("Story");
					  thead.append("th").text("Rank");
					  thead.append("th").text("Time");
					  thead.append("th").text("LineOfCode");
					  thead.append("th").text("");

					  var tr = tbody.selectAll("tr")
					      .data(rows)
					      .enter().append("tr");

					  var td = tr.selectAll("td")
					        .data(function(d) { return [d.dt, d.story, d.result,d.etime, d.mu]; })
					      .enter().append("td")
					        .text(function(d) { return d; });

					  var width = 80,
					      height = 280,
					      mx = 10,
					      radius = 2;

					  // Now add the chart column
					  d3.select("#datatable tbody tr").append("td")
					    .attr("id", "chart")
					    .attr("width", width + "px")
					    .attr("rowspan", rows.length);

					  var chart = d3.select("#chart").append("svg")
					      .attr("class", "chart")
					      .attr("width", width)
					      .attr("height", height);

					  var maxMu = 0;
					  var minMu = Number.MAX_VALUE;
					  for (i=0; i < rows.length; i++) {
					    if (rows[i].mu > maxMu) { maxMu = rows[i].mu; }
					    if (rows[i].mu < minMu) { minMu = rows[i].mu; }
					  }

					  var dates = rows.map(function(t) { return t.dt; });

					  var xscale = d3.scale.linear()
					    .domain([minMu, maxMu])
					    .range([mx, width-mx])
					    .nice();

					  var yscale = d3.scale.ordinal()
					    .domain(dates)
					    .rangeBands([0, height]);

					  chart.selectAll(".xaxislabel")
					      .data(xscale.ticks(2))
					    .enter().append("text")
					      .attr("class", "xaxislabel")
					      .attr("x", function(d) { return xscale(d); })
					      .attr("y", 10)
					      .attr("text-anchor", "middle")
					      .text(String)

					  chart.selectAll(".xaxistick")
					      .data(xscale.ticks(2))
					    .enter().append("line")
					      .attr("x1", function(d) { return xscale(d); })
					      .attr("x2", function(d) { return xscale(d); })
					      .attr("y1", 10)
					      .attr("y2", height)
					      .attr("stroke", "#eee")
					      .attr("stroke-width", 1);

					  chart.selectAll(".line")
					      .data(rows)
					    .enter().append("line")
					      .attr("x1", function(d) { return xscale(d.mu); })
					      .attr("y1", function(d) { return yscale(d.dt) + yscale.rangeBand()/2; })
					      .attr("x2", function(d,i) { return rows[i+1] ? xscale(rows[i+1].mu) : xscale(d.mu); })
					      .attr("y2", function(d,i) { return rows[i+1] ? yscale(rows[i+1].dt) + yscale.rangeBand()/2 : yscale(d.dt) + yscale.rangeBand()/2; })
					      .attr("stroke", "#777")
					      .attr("stroke-width", 1);

					  var pt = chart.selectAll(".pt")
					      .data(rows)
					    .enter().append("g")
					      .attr("class", "pt")
					      .attr("transform", function(d) { return "translate(" + xscale(d.mu) + "," + (yscale(d.dt) + yscale.rangeBand()/2) + ")"; });

					  pt.append("circle")
					      .attr("cx", 0)
					      .attr("cy", 0)
					      .attr("r", radius)
					      .attr("opacity", .5)
					      .attr("fill", "#ff0000");

					});
					</script>
			  </div>
			  <div class="txt_tab" id="tab4">
<!-- 
        <iframe src="http://ghv.artzub.com/#repo=kyp_group_parse&climit=100&user=bao1018" style="width:100%;height:500px;" ></iframe> -->
			  </div>


			</div>



		</div>	

		<script type="text/javascript">

			// var buttons = document.querySelectorAll(".radmenu a");
			
			// for (var i=0, l=buttons.length; i<l; i++) {
			//   var button = buttons[i];
			//   button.onclick = setSelected;
			// }
					// $('.goin').tooltip();

					var container = $('#container');
					//get the active class ,get the personal info,use ajax to refresh the details-view div(person info)....hope to be correct  
					$(document).on('click', '.list-view li', function(){
					  // $(this).addClass('active');
					  // container.addClass('details');
					  //location.href="/analysis/people";
					  // chart.refresh();
					});

					$('.back').click(function(){
					  container.removeClass('details');
					  $('.list-view li').removeClass('active');
					});

					// $(document).on('click', '.list-view-p li', function(){
					//   location.href="/analysis/project"
					// });


				var current=".myp_0";
				// var current_people="index0_0";

				function fun_hover(){
							$('.p_class').css("background","rgba(255,255,255,1)");
							$('.p_class').css("color","#000000");
							$('.people_class').css("background","rgba(255,255,255,1)");
							$('.people_class').css("color","#000000");
							$(this).css("background","#FFCC66");
							$(this).css("color","#FFFFFF");
							// alert(current);
							$(current).css("background","#FF9933");
							$(current).css("color","#FFFFFF");
				}

				function fun_hover_people(){
							$('.p_class').css("background","rgba(255,255,255,1)");
							$('.p_class').css("color","#000000");
							$(current).css("background","#FF9933");
							$(current).css("color","#FFFFFF");
							$('.people_class').css("background","rgba(255,255,255,1)");
							$('.people_class').css("color","#000000");
							$(this).css("background","#FFCC66");
							$(this).css("color","#FFFFFF");
							// alert(current);

							// $(current_people).css("background","#FF9933");
							// $(current_people).css("color","#FFFFFF");
				}



				$(document).ready(function(){
					
					fun_hover();


					$('.p_class').hover(
						fun_hover
					);

					$('.people_class').hover(
						fun_hover_people
					);

					$('.p_class').click(function(){
						$('.p_class').css("background","rgba(255,255,255,1)");
						$('.p_class').css("color","#000000");
						$(this).css("background","#FF9933");
						$(this).css("color","#FFFFFF");
						var str=$(this).attr('class');
						// alert(str);
						var res=str.split(" ");
						current="."+res[1];
						// alert(current);



						var project_id=$(this).attr('id')
						var class_name=".project_"+project_id;

						var pn_id='#pn_'+project_id;
						var project_name=$(pn_id).html();

						$('#people_title').html(project_name);

						$('.member').css("display","none");
						var n=$(class_name).attr('num');
						// alert(n);
						for (var i=0;i<n;i++){
							var m_class='.'+project_id+"_m"+i.toString();
							// alert(m_class);
							
							$(m_class).css("display","block");
							var offset= "translate3d(0,"+(i*70).toString()+"px,0)";
							// alert(offset);
							$(m_class).css("transform", offset);
						}
						// alert($(this).attr('id'));
					});
				});

			</script>


	

	</div>
</div>

<!-- 
<h3 style="margin-left:-100px;">Please Select</h3>
				<br/><br/><br/><br/>
				<a onclick="BackToTop()">Back</a>
				<div class="radmenu"><a href="#" class="show" >Select People</a>
				  <ul>
				    <li>
				      <a href="/analysis/people">Ray</a>
				      <ul> 
				        <li><a href="/analysis/project">Harvest 1</a></li>
				        <li><a href="/analysis/project">Harvest 2</a></li>
				        <li><a href="/analysis/project">Harvest 3</a></li>
				        <li><a href="/analysis/project">Harvest 4</a></li>
				        <li><a href="/analysis/project">Harvest 5</a></li>
				      </ul>
				    </li>
				    <li>
				      <a href="#">Kami</a>
				      <ul>
				        <li><a href="#">Project 1</a></li>
				        <li><a href="#">Project 2</a></li>
				        <li><a href="#">Project 3</a></li>
				        <li><a href="#">Project 4</a></li>
				        <li><a href="#">Project 5</a></li>
				      </ul>
				    </li>
				    <li>
				      <a href="#">Viki</a>
				      <ul>
				        <li><a href="#">Sub Menu 1</a></li>
				        <li><a href="#">Sub Menu 2</a></li>
				        <li><a href="#">Sub Menu 3</a></li>
				        <li><a href="#">Sub Menu 4</a></li>
				        <li><a href="#">Sub Menu 5</a></li>
				      </ul>
				    </li>
				    <li>
				      <a href="#">Eric</a>
				      <ul>
				        <li><a href="#">Sub Menu 1</a></li>
				        <li><a href="#">Sub Menu 2</a></li>
				        <li><a href="#">Sub Menu 3</a></li>
				        <li><a href="#">Sub Menu 4</a></li>
				        <li><a href="#">Sub Menu 5</a></li>
				      </ul>
				    </li>
				    <li>
				      <a href="#">Herbert</a>
				      <ul>
				        <li><a href="#">Sub Menu 1</a></li>
				        <li><a href="#">Sub Menu 2</a></li>
				        <li><a href="#">Sub Menu 3</a></li>
				        <li><a href="#">Sub Menu 4</a></li>
				        <li><a href="#">Sub Menu 5</a></li>
				      </ul>
				    </li>
				  </ul>
				</div> -->

